Optimizacija zmogljivosti JavaScripta: Razdeljevanje kode (Code Splitting) proti lenemu vrednotenju (Lazy Evaluation)

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Nalaganje...
}>
        
      
    

V tem primeru se OtherComponent naloži šele, ko je upodobljen. Medtem ko se nalaga, bo uporabnik videl sporočilo "Nalaganje...".

Orodja za razdeljevanje kode

• Webpack: Priljubljen združevalec modulov (module bundler), ki podpira različne tehnike razdeljevanja kode.
• Rollup: Drug združevalec modulov, ki se osredotoča na ustvarjanje majhnih, učinkovitih paketov.
• Parcel: Združevalec brez konfiguracije, ki samodejno upravlja razdeljevanje kode.
• Vite: Orodje za gradnjo, ki izkorišča izvorne ES module za hiter razvoj in optimizirane produkcijske gradnje.

Leno vrednotenje: Odlaganje izračunov

Kaj je leno vrednotenje?

Leno vrednotenje (Lazy evaluation), znano tudi kot odloženo vrednotenje, je programska tehnika, pri kateri se vrednotenje izraza odloži, dokler njegova vrednost ni dejansko potrebna. Z drugimi besedami, izračuni se izvedejo šele, ko so njihovi rezultati zahtevani, namesto da bi se jih nestrpno izračunalo vnaprej.

Predstavljajte si, da pripravljate večerjo z več hodi. Ne bi skuhali vseh jedi naenkrat. Namesto tega bi vsako jed pripravili šele, ko bi bil čas za postrežbo. Leno vrednotenje deluje podobno, saj izvaja izračune šele, ko so njihovi rezultati potrebni.

Kako deluje leno vrednotenje

V JavaScriptu je mogoče leno vrednotenje implementirati z različnimi tehnikami:

• Funkcije: Zavitje izraza v funkcijo omogoča odložitev njegovega vrednotenja, dokler se funkcija ne pokliče.
• Generatorji: Generatorji omogočajo ustvarjanje iteratorjev, ki proizvajajo vrednosti na zahtevo.
• Memoizacija: Memoizacija vključuje predpomnjenje rezultatov dragih klicev funkcij in vračanje predpomnjenega rezultata, ko se ponovno pojavijo enaki vhodi.
• Proksiji: Proksije je mogoče uporabiti za prestrezanje dostopa do lastnosti in odložitev izračuna vrednosti lastnosti, dokler se do njih dejansko ne dostopi.

Prednosti lenega vrednotenja

• Izboljšana zmogljivost: Z odlaganjem nepotrebnih izračunov lahko leno vrednotenje znatno izboljša zmogljivost, zlasti pri delu z velikimi nabori podatkov ali zapletenimi izračuni.
• Zmanjšana poraba pomnilnika: Leno vrednotenje lahko zmanjša porabo pomnilnika z izogibanjem ustvarjanju vmesnih vrednosti, ki niso takoj potrebne.
• Povečana odzivnost: Z izogibanjem nepotrebnim izračunom med začetnim nalaganjem lahko leno vrednotenje poveča odzivnost aplikacije.
• Neskončne podatkovne strukture: Leno vrednotenje omogoča delo z neskončnimi podatkovnimi strukturami, kot so neskončni seznami ali tokovi, saj izračuna samo potrebne elemente na zahtevo.

Primer: Leno nalaganje slik

Pogost primer uporabe lenega vrednotenja je leno nalaganje slik. Namesto da bi naložili vse slike na strani vnaprej, lahko odložite nalaganje slik, ki na začetku niso vidne v vidnem polju (viewport). To lahko znatno izboljša začetni čas nalaganja strani in zmanjša porabo omrežne pasovne širine.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Ta primer uporablja API IntersectionObserver za zaznavanje, kdaj slika vstopi v vidno polje. Ko je slika vidna, se njen atribut src nastavi na vrednost njenega atributa data-src, kar sproži nalaganje slike. Opazovalec nato preneha opazovati sliko, da prepreči ponovno nalaganje.

Primer: Memoizacija

Memoizacijo lahko uporabimo za optimizacijo dragih klicev funkcij. Tukaj je primer:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulacija časovno potratnega izračuna
  for (let i = 0; i < 100000000; i++) {
    // Naredi nekaj
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Prvi klic');
console.log(memoizedCalculation(5)); // Prvi klic - traja nekaj časa
console.timeEnd('Prvi klic');

console.time('Drugi klic');
console.log(memoizedCalculation(5)); // Drugi klic - takoj vrne predpomnjeno vrednost
console.timeEnd('Drugi klic');

V tem primeru funkcija memoize sprejme funkcijo kot vhod in vrne memoizirano različico te funkcije. Memoizirana funkcija predpomni rezultate prejšnjih klicev, tako da lahko naslednji klici z istimi argumenti vrnejo predpomnjen rezultat brez ponovnega izvajanja prvotne funkcije.

Razdeljevanje kode proti lenemu vrednotenju: Ključne razlike

Čeprav sta tako razdeljevanje kode kot leno vrednotenje močni tehniki optimizacije, se nanašata na različne vidike zmogljivosti:

• Razdeljevanje kode: Osredotoča se na zmanjšanje velikosti začetnega paketa z deljenjem kode na manjše dele in njihovim nalaganjem na zahtevo. Uporablja se predvsem za izboljšanje začetnega časa nalaganja strani.
• Leno vrednotenje: Osredotoča se na odlaganje izračuna vrednosti, dokler niso dejansko potrebne. Uporablja se predvsem za izboljšanje zmogljivosti pri delu z dragimi izračuni ali velikimi nabori podatkov.

V bistvu razdeljevanje kode zmanjša količino kode, ki jo je treba prenesti vnaprej, medtem ko leno vrednotenje zmanjša količino izračunov, ki jih je treba izvesti vnaprej.

Kdaj uporabiti razdeljevanje kode in kdaj leno vrednotenje

Razdeljevanje kode

• Velike aplikacije: Uporabite razdeljevanje kode za aplikacije z veliko količino kode JavaScript, zlasti tiste z več potmi ali funkcijami.
• Izboljšanje začetnega časa nalaganja: Uporabite razdeljevanje kode za izboljšanje začetnega časa nalaganja strani in zmanjšanje časa do interaktivnosti.
• Zmanjšanje porabe omrežne pasovne širine: Uporabite razdeljevanje kode za zmanjšanje količine podatkov, ki jih je treba prenesti po omrežju.

Leno vrednotenje

• Dragi izračuni: Uporabite leno vrednotenje za funkcije, ki izvajajo drage izračune ali dostopajo do velikih naborov podatkov.
• Izboljšanje odzivnosti: Uporabite leno vrednotenje za izboljšanje odzivnosti aplikacije z odlaganjem nepotrebnih izračunov med začetnim nalaganjem.
• Neskončne podatkovne strukture: Uporabite leno vrednotenje pri delu z neskončnimi podatkovnimi strukturami, kot so neskončni seznami ali tokovi.
• Leno nalaganje medijev: Implementirajte leno nalaganje za slike, videoposnetke in druge medijske vsebine za izboljšanje časa nalaganja strani.

Kombiniranje razdeljevanja kode in lenega vrednotenja

V mnogih primerih je mogoče razdeljevanje kode in leno vrednotenje kombinirati za doseganje še večjih izboljšav zmogljivosti. Na primer, lahko uporabite razdeljevanje kode, da razdelite svojo aplikacijo na manjše dele, in nato uporabite leno vrednotenje za odložitev izračuna vrednosti znotraj teh delov.

Predstavljajte si aplikacijo za e-trgovino. Lahko bi uporabili razdeljevanje kode, da bi aplikacijo razdelili na ločene pakete za stran s seznamom izdelkov, stran s podrobnostmi o izdelku in stran za zaključek nakupa. Nato bi lahko znotraj strani s podrobnostmi o izdelku uporabili leno vrednotenje za odložitev nalaganja slik ali izračuna priporočil za izdelke, dokler niso dejansko potrebni.

Onkraj razdeljevanja kode in lenega vrednotenja: Dodatne tehnike optimizacije

Čeprav sta razdeljevanje kode in leno vrednotenje močni tehniki, sta le dva dela sestavljanke, ko gre za optimizacijo zmogljivosti JavaScripta. Tukaj je nekaj dodatnih tehnik, ki jih lahko uporabite za nadaljnje izboljšanje zmogljivosti:

• Minifikacija: Odstranite nepotrebne znake (npr. presledke, komentarje) iz svoje kode, da zmanjšate njeno velikost.
• Stiskanje (Compression): Stisnite svojo kodo z orodji, kot sta Gzip ali Brotli, da še dodatno zmanjšate njeno velikost.
• Predpomnjenje (Caching): Izkoristite predpomnjenje brskalnika in CDN predpomnjenje, da zmanjšate število zahtevkov na vaš strežnik.
• Odstranjevanje neuporabljene kode (Tree Shaking): Odstranite neuporabljeno kodo iz svojih paketov, da zmanjšate njihovo velikost.
• Optimizacija slik: Optimizirajte slike s stiskanjem, spreminjanjem velikosti na ustrezne dimenzije in uporabo sodobnih slikovnih formatov, kot je WebP.
• Debouncing in Throttling: Nadzorujte hitrost izvajanja obravnavalcev dogodkov (event handlers), da preprečite težave z zmogljivostjo.
• Učinkovita manipulacija DOM: Zmanjšajte manipulacije DOM in uporabljajte učinkovite tehnike za manipulacijo DOM.
• Spletni delavci (Web Workers): Prenesite računsko intenzivne naloge na spletne delavce, da preprečite blokiranje glavne niti.

Zaključek

Optimizacija zmogljivosti JavaScripta je ključni vidik zagotavljanja pozitivne uporabniške izkušnje in doseganja poslovnih ciljev. Razdeljevanje kode in leno vrednotenje sta dve močni tehniki, ki lahko znatno izboljšata zmogljivost z zmanjšanjem začetnih časov nalaganja, zmanjšanjem porabe omrežne pasovne širine in odlaganjem nepotrebnih izračunov. Z razumevanjem, kako te tehnike delujejo in kdaj jih uporabiti, lahko ustvarite hitrejše, bolj odzivne in prijetnejše spletne aplikacije.

Ne pozabite upoštevati specifičnih zahtev vaše aplikacije in uporabite tehnike, ki so najprimernejše za vaše potrebe. Nenehno spremljajte zmogljivost vaše aplikacije in izboljšujte svoje strategije optimizacije, da zagotovite najboljšo možno uporabniško izkušnjo. Izkoristite moč razdeljevanja kode in lenega vrednotenja za ustvarjanje spletnih aplikacij, ki niso samo bogate s funkcijami, ampak tudi zmogljive in prijetne za uporabo po vsem svetu.

Dodatni viri za učenje

• Dokumentacija za Webpack: https://webpack.js.org/
• Dokumentacija za Rollup: https://rollupjs.org/guide/en/
• Dokumentacija za Vite: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimizacija izvajanja JavaScripta: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/